<template>
    <div class="home">
        <!-- 头部 -->
        <header>
            <span class="icon_left"><x-icon type="ios-arrow-left" size="30" class="icon-blue"></x-icon></span>
            <span class="title">饿了么</span>
           <span class="icon_right"><x-icon type="ios-checkmark-outline" size="30"></x-icon></span>
        </header>
        <!-- 搜索 -->
        <div class="home_soushuo">
            <div class="place">
                <span class="glyphicon glyphicon-map-marker address"></span>
                <span>万翔国际</span>
                <span class="glyphicon glyphicon-menu-down"></span>
            </div>
            <div class="ipt">
                <router-link to="/sercher" tag="div"  class="sercher"></router-link>
                <!-- <input type="text"> -->
                <span class="ipt_text">
                    <span class="glyphicon glyphicon-search"></span>
                    <span>搜索商家、商品名称</span>
                </span>
            </div>
        </div>
        <!-- 轮播1 -->
        <div class="home_lunbo1">
            <swiper loop auto height="5rem" :show-dots="false" :list="demo07_list" :index="demo07_index" @on-index-change="demo07_onIndexChange"></swiper>
        </div>
        <!-- 分类 -->
        <div class="feilei">
            <swiper  height="6.875rem" dots-position="center" dots-class="feileidot">
                <swiper-item v-for="(value,index) in newAry" :key="index">
                     <div class="feilei1">
                       <ul>
                           <li v-for="(v1,i) in newAry[index]" :key="i">
                                <a href="">
                                    <span class="feilei1_1">
                                    <img :src="v1.url" alt="">
                                    </span>
                                    <span class="title">{{v1.name}}</span>
                                </a>
                            </li> 
                       </ul>
                    </div>
                </swiper-item>
            </swiper>
        </div>
        <!-- 品质套餐 限量抢购 -->
        <div class="px">
            <ul>
                <li>
                    <div class="con">
                        <p>品质套餐</p>
                        <span>搭配齐全吃得好</span>
                        <a href="">立即抢购&nbsp;></a>
                        <img src="https://fuss10.elemecdn.com/d/d4/16ff085900d62b8d60fa7e9c6b65dpng.png?imageMogr/thumbnail/!240x160r/gravity/Center/crop/240x160/" alt="">
                    </div>
                </li>
                <li>
                    <div class="con">
                        <p style="color:red">限量抢购</p>
                        <span>超值美味 9.9元起</span>
                        <a href="" style="color:black"><span style="color:red;display:inline-block" >687人</span>正在抢&nbsp;></a>                  
                        <img src="https://fuss10.elemecdn.com/b/e1/0fa0ed514c093a7138b0b9a50d61fpng.png?imageMogr/thumbnail/!240x160r/gravity/Center/crop/240x160/" alt="">
                    </div>
                </li>
            </ul>
        </div>
        <!-- 轮播二 -->
        <div class="home_lunbo2">
            <swiper loop auto height=" 3.75rem" dots-position="center" :list="List01" :index=" List01_index" @on-index-change="demo01_onIndexChange"></swiper>
        </div>
        <!-- 推荐商家 -->
        <div class="bigtitle">——<span style="margin:0px  0.1875rem;">推荐商家</span>——</div>
        <div class="content">
        <!-- <svg data-v-a5cc4024="" viewBox="0 0 72 32" class="dropdown-icon" data-spm-anchor-id="a2ogi.12117543.0.i0"><path data-v-a5cc4024="" d="M36 32l36-32h-72z"></path></svg> -->
           <div>
                <sticky  :check-sticky-support="true" :offset="90">
                    <tab :line-width=2 active-color='#fc378c'>
                        <tab-item class="vux-center" >
                          <span  @click="proup">
                                <span>综合排序</span>
                            <span class="glyphicon glyphicon-triangle-bottom" style="font-size:0.4rem"></span>
                          </span>

                        </tab-item>
                        <tab-item class="vux-center"><span  @click="distance"> 距离最近</span></tab-item>
                        <tab-item class="vux-center"><span @click="pzlm">品质联盟</span></tab-item>
                        <tab-item class="vux-center">
                            <span @click="filters">
                                 <span>筛选</span>
                            <span class="glyphicon glyphicon-filter" style="font-size:0.5rem"></span>
                            </span>
                           
                        </tab-item>
                    </tab>
                    <div style="position:relative">
                         <!-- 综合服务 -->
                        <div class="proup">
                            <p @click="mainsite" style="color:#fc378c">综合排序
                                <span class="glyphicon glyphicon-ok" style="font-size:12px;"></span>
                            </p>
                            <p>好评优先</p>
                            <p>销量最高</p>
                            <p>起送价最低</p>
                            <p>配送最快</p>
                            <p>配送费最低</p>
                            <p>人均从低到高</p>
                            <p>人均从高到低</p>
                        </div>
                        <!-- 筛选 -->
                        <div class="RightProup">
                            <!-- 商家服务 -->
                            <div class="con">
                                <div class="sm_title"><span style="margin-left:.625rem">商家服务(可多选)</span></div>
                                <div class="RightProup_con">
                                    <ul>
                                        <li>
                                            <img src="../../../static/icon/5.png" alt="">
                                            <span>蜂鸟转送</span>
                                        </li>
                                        <li style="margin:0"><img src="../../../static/icon/1.gif" alt=""><span> 品牌商家</span></li>
                                        <li><img src="../../../static/icon/2.png" alt=""><span> 是安保</span></li>
                                        <li> <img src="../../../static/icon/3.png" alt=""><span> 新店</span></li>
                                        <li style="margin:0"> <img src="../../../static/icon/4.png" alt=""><span> 开发票</span></li>
                                    </ul>
                                </div>
                            </div>
                             <div class="con" v-for="(value,s) in filter" :key="s">
                                <div class="sm_title"><span style="margin-left:.625rem">{{value.title}}</span></div>
                                <div class="RightProup_con">
                                    <ul>
                                        <li v-for="(item,m) in value.list" :key="m">
                                            <span>{{item}}</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                           <div class="bottom">
                               <span class="btn_span" @click="hideright">确定</span>
                               <span class="btn_span" @click="hideright">清空</span>
                           </div>
                        </div>  
                    </div>
                </sticky> 
           </div>

             <!-- 综合排序 -->
            <div id="zonghe" style="position:relative">
                  <div class="mask"></div>
                    <div class="content1" v-for="(value,sum) in restaurantAry" :key="sum"> 
                      
                        <router-link :to="{name:'info',params:{id:value.restaurant.id}}" tag="div" class="link_div left">
                            <img :src="value.restaurant.image_path" alt="">
                        </router-link>
                       
                        <div class="right">
                            <router-link :to="{name:'info',params:{id:value.restaurant.id}}" tag="div" class="link_div">
                                <div class="content1_1">
                                        <span class="left1">{{value.restaurant.name}} </span>       
                                    <i class="right1">...</i>
                                </div>
                                <div class="content1_1">
                                    <span>
                                        <x-icon type="ios-star" size="15" ></x-icon>
                                        <x-icon type="ios-star" size="15"></x-icon>
                                        <x-icon type="ios-star" size="15"></x-icon>
                                        <x-icon type="ios-star" size="15"></x-icon>
                                        <x-icon type="ios-star-half" size="15"></x-icon>
                                    </span>
                                    <span class="text2">{{value.restaurant.rating}}</span>
                                    <span class="text2">月售{{value.restaurant.rating_count}}单</span>
                                </div>
                                <div class="content1_1">
                                    <span class="text2 left2">
                                        ￥{{value.restaurant.piecewise_agent_fee.rules[0].price}}起送 | 配送费
                                        ￥{{value.restaurant.piecewise_agent_fee.rules[0].fee}}
                                        </span>
                                    <span class="text2 right2" style="color:gray">{{(value.restaurant.distance/1000).toFixed(1)}}km | {{value.restaurant.order_lead_time}}分钟</span>
                                </div>
                                <div class="content1_1">
                                    <span v-for="(value,i) in value.restaurant.support_tags.text" :key="i">{{value}}</span>
                                        <span class="text2" style="border: .03125rem solid #999">{{value.restaurant.support_tags[0].text}}</span>
                                    <span class="text2" style="border: .03125rem solid #999;font-weight:600;color:#444" >品质联盟</span>
                                    <span class="text2" style="color:red">口碑人气好店</span> 
                                </div>
                            </router-link>
                                   <!--  v-for="(vul,index) in value.restaurant.activities" :key="index" -->
                               <div class="content1_2">
                                <div class="content1_21" v-for="(vul,index) in value.restaurant.activities" :key="index">
                                    <span class="shou left2 green"  v-if="vul.icon_name=='首'">{{vul.icon_name}}</span>
                                     <span class="shou left2 orange" v-else-if="vul.icon_name=='特' || vul.icon_name=='换'">{{vul.icon_name}}</span>
                                    <span class="shou left2 pink"  v-else>{{vul.icon_name}}</span>
                                    <p class="text2 left2">&#x3000;{{vul.description}}</p>
                                    <span class="text2 right2 link_div" style="color:gray;" @click="active(sum)"  v-if="index==0">                    
                                        <span >{{value.restaurant.activities.length}}个活动</span>
                                        <span class="glyphicon glyphicon-triangle-bottom jiantou" style="font-size:0.3rem"></span>          
                                    </span>
                                </div>
                                <!-- <div class="content1_21">
                                    <span class="jian left2">减</span>
                                    <p class="text2 left2">满30减15，满20减9，满20减9</p>
                                </div> -->
                                 <!-- <div class="content1_21">
                                    <span class="jian left2">减</span>
                                    
                                </div> -->
                            </div>
                            
                        </div>
                        
                    </div>
                  
            </div>  

        </div>
       
        <div style="height:500px"></div>



    </div>
    
</template>
<script>
    import { Swiper, GroupTitle, SwiperItem, XButton, Divider } from 'vux'
    import { Grid, GridItem } from 'vux'
    import { Tab, TabItem, Sticky } from 'vux'

    const baseList = [{
        url: 'javascript:',
        img: '../static/icon/lunbo1.jpg',
        }, {
        url: 'javascript:',
        img: '../static/icon/lunbo2.jpg',
        }]

    const List01 = [{
        url: 'javascript:',
        img: 'https://fuss10.elemecdn.com/0/f5/384fee6d25fff741b731d19259f7fjpeg.jpeg',
        }, {
        url: 'javascript:',
        img: 'https://fuss10.elemecdn.com/8/29/a222070b119692625b6fd8d043285jpeg.jpeg',
        },
        {
        url: 'javascript:',
        img: 'https://fuss10.elemecdn.com/4/31/bf736feabc32b61888d0169497c79jpeg.jpeg',
        },
        {
        url: 'javascript:',
        img: 'https://fuss10.elemecdn.com/0/f5/384fee6d25fff741b731d19259f7fjpeg.jpeg',
    }]
    var filter=[
        {title:"优惠活动",list:["新用户优惠","特价商品","下单立减","赠品优惠","下单返红包","进店领红包"]},
        {title:"人均消费",list:["￥20以下","￥20-￥40","￥40-￥60","￥60-￥80","￥80-￥100","￥100以上"]}
        ]
    const list = () => ['综合排序', '距离最近', '品质联盟', '筛选']
  
    export default {
        components: {
            Tab,
            TabItem,
            Sticky,
            Swiper,
            SwiperItem,
            GroupTitle,
            XButton,
            Divider,
            Grid,
            GridItem,
        },
        data(){
            return {
                demo2: '综合排序',
                list2: list(),
                demo07_list: baseList,
                demo07_index: 0,
                List01,
                List01_index:0,
                newAry:[],
                restaurantAry:[],
                filter,
                show:true,
                seen:true,
                activeAry:[],
                actShow:true
            }
        },
        
        // 7d8a867c870b22bc74c87c348b75528djpeg
        // https://fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg
        // https://fuss10.elemecdn.com/1/48/bf1a859bf81553bbcfd6cf4ac42cbjpeg.jpeg
        // https://h5.ele.me/restapi/shopping/v2/entries?latitude=24.54786&longitude=118.12450&templates[]=main_template&templates[]=favourable_template&templates[]=svip_template&terminal=h5
        created(){
            this.$http
            .get("/ele/restapi/shopping/v2/entries?latitude=24.54786&longitude=118.12450&templates[]=main_template&templates[]=favourable_template&templates[]=svip_template&terminal=h5"
           ).then(function(resData) {
               var ary=resData.body[0].entries;
               var bigAry=[];
                var str="";
                for(var i=0;i<ary.length;i++){
                    var obj={};
                    var s1=ary[i].image_hash.slice(0,1);
                    var s2=ary[i].image_hash.slice(1,3);
                    var s3=ary[i].image_hash.slice(3);
                    str="https://fuss10.elemecdn.com/"+s1+"/"+s2+"/"+s3+".jpeg";
                    obj.url=str;
                    obj.name=ary[i].name;
                    bigAry.push(obj);
                }
                var ary1=bigAry.slice(0,10);
                var ary2=bigAry.slice(10);
                this.newAry=[ary1,ary2]
                // console.log(this.newAry);
            });
            this.mainsite();
        
        },
          methods:{
            demo07_onIndexChange (index) {
                this.demo07_index = index
            },
             demo01_onIndexChange (index) {
                this.demo07_index = index
            },
            //综合排序的功能接口
            mainsite(){
                this.$http.get("/ele/restapi/shopping/v3/restaurants?latitude=24.54786&longitude=118.124509&offset=0&limit=20&extras[]=activities&extras[]=tags&extra_filters=home&order_by=0&rank_id=&terminal=h5")
                .then(function(resData){
                  this.compute(resData.body.items); 
                //   console.log(resData)
                })
               
                $(".proup").hide();
                 $(".mask").hide();
               
            },
            distance(){
                //距离最近的功能接口
                this.$http.
                get("/ele/restapi/shopping/v3/restaurants?latitude=24.54786&longitude=118.124509&offset=0&limit=20&extras[]=activities&extras[]=tags&extra_filters=home&order_by=5&rank_id=5e388e76312a43ebb3505a030b05dab6&terminal=h5")
                .then(function(resData){
                    this.compute(resData.body.items)
                })
            },
            pzlm(){
                // 品质联盟
                  this.$http.
                get("/ele/restapi/shopping/v3/restaurants?latitude=24.54786&longitude=118.124509&offset=0&limit=20&extras[]=activities&extras[]=tags&extra_filters=home&quality_union=1&rank_id=&terminal=h5")
                .then(function(resData){
                    this.compute(resData.body.items)
                })
               
            },
            //筛选
            filters(){
                    if(this.show){
                        $(".RightProup").slideDown(300);
                        $(".mask").show();
                        $(".mask").click(function(){
                        $(".RightProup").hide();
                        $(this).hide();
                        });
                        $(".proup").hide();
                        this.show=!this.show;
                    }else{
                        this.hideright();
                        this.show=!this.show;
                    }
            },
            // 隐藏筛选
            hideright(){
                // $(".RightProup").hide();
                $(".RightProup").slideUp(200);
                 $(".mask").hide();   
            },

            proup(){
               if(this.seen){ 
                    $(".proup").slideDown(300);
                    $(".mask").show();
                    $(".mask").click(function(){
                    $(".proup").hide();
                    $(this).hide();
                    });
                     $(".proup").click(function(){
                    $(".mask").hide();;
                    $(this).hide();
                    });
                    $(".RightProup").hide();
                    this.seen=!this.seen;
               }else{
                   $(".proup").slideUp(200);
                   $(".mask").hide();
                    this.seen=!this.seen
               }
            },
            // 点击活动：
             active(index){
               if(this.actShow){
                    $(".content1_2").eq(index).css("overflow","visible");
                    this.actShow=!this.actShow;
                    // console.log($(".content1_2").eq(index).children().children(".jiantou"))
                    var jinatou= $(".content1_2").eq(index).children().children().children(".jiantou")
                    jinatou.css("transform","rotate(180deg)"); 
                    jinatou.css("transition","all 0.1s"); 

               }else{
                    $(".content1_2").eq(index).css("overflow","hidden");
                     $(".jiantou").css("transform","rotate(0deg)");
                    this.actShow=!this.actShow;
               }
                
            },
            // 封装一个方法，改变点击活动中的字体颜色

            // 封装一个函数 计算 综合排序、距离最近  请求接口的数据
            compute(value){
                 $(".RightProup").hide();
                 $(".proup").hide();
                 $(".mask").hide();
                var str="";
                 for(var i=0;i<value.length;i++){
                        var s1=value[i].restaurant.image_path.slice(0,1);
                        var s2=value[i].restaurant.image_path.slice(1,3);
                        var s3=value[i].restaurant.image_path.slice(3);
                        if(value[i].restaurant.image_path.endsWith("jpeg")){
                            str="https://fuss10.elemecdn.com/"+s1+"/"+s2+"/"+s3+".jpeg";
                        }else{
                            str="https://fuss10.elemecdn.com/"+s1+"/"+s2+"/"+s3+".png";
                        }
                        value[i].restaurant.image_path=str;
                   }
                //    console.log(value)
                //    this.activeAry=value.restaurant.activities;
                   this.restaurantAry=value
                    this.show=true;
                    this.seen=true;

            }
            

        }
        
    }

    // console.log($);
    // 滚动固定导航条
     // 监听滚动事件
        $(function(){          
            $(window).scroll(function(){
                // var h1=$(".ipt").offset().top;
                var h1=55;
                // console.log(h1);
                // console.log($(this).scrollTop());
                if($(this).scrollTop()<h1){
                    $(".ipt").css({
                        position: "fixed",
                        top: "3.4375rem",
                        // top: "1.875rem" ,
                        zIndex:0 
                    })
                }else{
                    $(".ipt").css({
                            position: "fixed",
                            // top: "3.4375rem",
                            top: "1.875rem" ,
                            zIndex:300
                    })
                } ;
                

            })
                // console.log($(".tabBar").offset().top);
        })
        
  
 
</script>
<style scoped>
*{
    box-sizing: border-box;
}
body{
    height: 100%;
    
}
   
    p{
        margin: 0px;
        padding: 0px
        ov
    }

    li{
        list-style: none;
    }
    ul{
        margin: 0px;
        padding: 0px;

    }
    
     .link_div{
        cursor: pointer;
    }
    /* 筛选 */
    .RightProup{
        width: 100%;
        /* height: 9.375rem 150/16; */
        /* border: 1px solid red; */
        background-color: white;
         display: none;
         z-index: 120;
         padding: .15625rem /* 2.5/16 */;
         
    }
    .RightProup .sm_title{
        width: 100%;
        height: 1.25rem /* 20/16 */;
        border: .0625rem 1/16 solid red;
        line-height: 1.25rem /* 20/16 */;
        color:#777;
    }
    .RightProup_con{
        width: 100%;
        /* padding: .15625rem 2.5/16; */
    }
       .RightProup_con ul{
           width: 100%;
           height: 100%;
    }
    .RightProup_con li{
        display: inline-block;
        width: 30%;
        height: 1.25rem /* 20/16 */;
        line-height: 1.25rem /* 20/16 */;
        background-color:rgb(243, 243, 243);
        text-align: center;
        margin:.15625rem /* 2.5/16 */;
        font-size:.5625rem /* 9/16 */;
    }
    .RightProup_con li img{
        width: .75rem /* 12/16 */;
    }
    .bottom {
          margin-top: .625rem /* 10/16 */;
        width: 100%;
        height: 1.875rem /* 30/16 */;
    }

    .bottom .btn_span{
        width: 50%;
        float: left;
        height: 100%;
        text-align: center;
        line-height: 1.875rem /* 30/16 */;
        /* background-color: greenyellow; */
        border: .0625rem /* 1/16 */ solid rgb(211, 211, 211);
        font-size: .75rem /* 12/16 */;
        color:rgb(216, 212, 212);
      
    }
     .bottom .btn_span:nth-child(1){
        border-right: none;
       

    }
    .bottom .btn_span:nth-child(2){
        border-left: none;
        background-color: rgb(14, 199, 14);
        color:white;

    }




    /* 综合排序过滤 */
    .proup{
        width: 100%;
        background-color: white;
        display: none;
        position: absolute;
        z-index: 120
    }
    .proup p{
        width: 100%;
        /* border: 1px solid black; */
        padding: .3125rem /* 5/16 */ ;
    }
    .mask{
        width: 100%;
        height: 100%;
        position: absolute;
        top:0px;
        left:0px;
        background-color: #777;
        opacity: 0.5;
        display: none;
        z-index: 100;
    }
   
    header{
        width: 100%;
        height: 1.875rem /* 30/16 */;
        background-color: white;
        position: fixed;
        top: 0px;
        /* border: 1px solid red; */
        line-height: 1.875rem ;
        z-index:500;

    }
    .icon_left{
        position: absolute;
        top:20%;
        left: .3125rem /* 5/16 */;
    }
    .icon_right{
        position: absolute;
        top:20%;
        right: .3125rem /* 5/16 */;
    }
      header .title{
        margin-left: 2.5rem /* 40/16 */;
        font-size: .75rem /* 12/16 */;
    }
    .vux-x-icon {
    fill: gold;
    }
    .cell-x-icon {
    display: block;
    fill: green;
    }
    .home_soushuo{
        width: 100%;
        height:4.0625rem /* 65/16 */;
        background-color: rgb(30, 164, 253);
        margin-top: 1.875rem /* 30/16 */;
    }
    .home_soushuo div{
        /* height:1.875rem  */
        width: 100%;
        line-height:1.5625rem /* 30/16 */;
        /* border: 1px solid red; */
    }
    .home_soushuo .place span{
        color: white;
        font-weight: 600;
        font-size: .75rem /* 12/16 */;    
    }
    .home_soushuo .place .address{
        color: white;
        margin-left: .625rem /* 10/16 */;
    }
    .home_soushuo .ipt{
        /* border: 1px solid black; */
         position: relative;
         height:2.1875rem /* 35/16 */;
         background-color: rgb(30, 164, 253);
    }
    .home_soushuo .ipt .sercher{
        height:1.5625rem /* 25/16 */;
        width: 95%;
        position: absolute;
        top:calc(50% - .78125rem);
        left:2.5%;
        background-color: white;
    
    }
    .home_soushuo .ipt_text{
        position: absolute;
        left:25%;
        color: gray;
        font-size: .625rem /* 10/16 */;
        top:calc(50% - .78125rem);
    }
    .home_lunbo1{
        width: 100%;
        height: 5rem /* 80/16 */;
        /* border: 1px solid red; */
    }
    .vux-slider{
        width: 100%;
        height: 100% !important;
        margin: 0px;
        padding: 0px;
    }
    ul{
        margin: 0px;
        padding: 0px;
      
    }

    .feilei{
        width: 100%;
        height:6.875rem /* 110/16 */;
        /* border: 1px solid red; */
        margin: .15625rem /* 2.5/16 */ 0;
    }
    .feilei li{
        float: left;
        width: 20%;
        margin:.15625rem /* 2.5/16 */ 0px;
        height: 3.125rem /* 50/16 */;
        /* border: 1px solid black; */
        text-align: center;
       
    }
    .feilei li .feilei1_1{
        display: block;
        width: 2rem /* 40/16 */;
        height: 2rem /* 40/16 */; 
        margin: 0 auto;
    }
    .feilei li .feilei1_1 img{
        width: 100%;
        height: 100%;
    }
     .feilei li .title{
         font-size:.5625rem /* 9/16 */;
     }
     .feilei li a{
         text-decoration: none;
         color:#333;
     }
     .px{
         width: 100%;
         height:5.625rem /* 90/16 */;
         /* border: 1px solid black; */
         padding:.15625rem /* 2.5/16 */ .3125rem;
     }
     .px ul{
         width: 100%;
         height: 100%;
     }
    
     .px li{
         float: left;
         width: 50%;
         height:100%;
         background-color: rgb(236, 236, 236);
         
        
     }
     .px li .con{
        /* border: 1px solid palevioletred; */
        font-size: .625rem /* 10/16 */;
        height: 100%;
        padding: .1875rem /* 3/16 */ .3125rem /* 5/16 */;
        position: relative;
        
     }
     .px li .con p{
        margin: 0px;
        padding: 0px;
        font-size: .75rem /* 12/16 */;
        font-weight: 600;
     }
     .px li .con span{
         display: block;
         color: gray;
     }
    .px li .con a{
        color: goldenrod; 
        font-weight: 600;
    }
    .px li img{
        width:3.75rem /* 60/16 */;
        position: absolute;
        bottom: .15625rem /* 2.5/16 */;
        right: .3125rem /* 5/16 */;
    
    }
    .px li:nth-child(1){
        border-right: .03125rem /* 0.5/16 */ solid white;;
    }
    .px li:nth-child(2){
        border-left: .03125rem /* 0.5/16 */ solid white;;
    }
    .home_lunbo2{
        padding: 0 .3125rem /* 5/16 */;
    }

     .bigtitle{
        width: 100%;
        height: 1.875rem /* 30/16 */;
        /* border: 1px solid red; */
        font-size:.625rem /* 10/16 */;
        line-height: 1.875rem /* 30/16 */;
        text-align: center;
        background-color: white;
        
        
    }
    .content .content1{
        width:100%;
        height:100%;
       display: flex;
       justify-content: space-around;
        background-color: white;
        border-bottom: .0625rem solid rgb(231, 230, 230); 
        padding: .3125rem /* 5/16 */;  
    }  
    .content .content1 .left{
        width: 20%;
        /* position:absolute; */
        

    }
    .content .content1 .left img{
        width: 100%;
    }
   
    .content .content1 .right{
        /* margin-left:20%; */
        /* display:inline-block; */
        width:80%;
        padding: .3125rem /* 5/16 */ .5rem /* 8/16 */;
    }
    .content .content1 .left2{
        float: left;
    }
      .content .content1 .right2{
        float: right;
       
    }
    
    .content .content1 .content1_1{
        width: 100%;
        height: 1.125rem /* 18/16 */;
        /* line-height:1.125rem ; */
        /* border: 1px solid red; */
        font-size: .625rem /* 10/16 */;
        color:#333;
    }
    
    .content .content1 .content1_1 .left1{
        float: left;
        font-weight: 600;
       
    }
    .content .content1 .content1_1 .right1{
        float: right;
        color: gray;
        font-weight: 600;
    }
    .content .content1 .content1_2{
        width: 100%;
        height:2rem;
        overflow: hidden;
       
        /* border:  1px solid red; */


    }
    .content1_2 .content1_21{
        /* border: 1px solid red; */
        width: 100%;
        height: 1rem /* 16/16 */;
        margin-top:.125rem /* 2/16 */;
     
    }
   
    .content .content1 .content1_2 .shou,
    .content .content1 .content1_2 .jian{
       font-size: .5rem /* 8/16 */;
       color: white;
       padding:0  .05rem /* 0.8/16 */;
       /* background-color: green; */
       border-radius:.0625rem /* 1/16 */;

    }
    .green{
        background-color: rgb(88, 173, 88);
    }
    .pink{
        background-color: rgb(224, 117, 117);
    }
    .orange{
        background-color: rgb(233, 124, 85);
    }
     .content .content1 .content1_2 .jian{
       background-color: red;
    }
  
 
    .text2{
         font-size: .5rem /* 8/16 */;
         color: gray;

     }
     p.text2{
        font-size: .5rem /* 8/16 */;
        color: gray;
        width: 70%;
         overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;    
     }
   
</style>